<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout_viewport</title>
    <style>
      html{
        width:500px;
        border:10px solid black;
        padding:10px;
        overflow: scroll;
        height:700px;
      }
      body{
        margin: 0;
      }
    </style>
</head>
<body>
<!--<div style="width:1200px;border:1px solid black;"></div>-->
<!--<img src="../img/布局视口.jpg" alt="" width="490">-->

布局视口(layout viewport)：<br>
+ 当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。 <br>
+ 当这个元素是最顶级的元素时，它就是基于布局视口来计算的。 <br>

移动端下 布局视口大部分被赋予一个默认值 为980px <br>

又因为document.documentElement和布局视口的大小一样,故称之为文档视口也不是不可以 <br>

注意：布局视口、视觉视口、理想视口 都是针对手机端来说的 是手机端的概念

<script>
    // 浏览器视口的宽度(不包括滚动条的轨道宽(但手机端是包括的,因为手机端的滚动条是悬浮在上面的,不单独占位)、DevTool面板) ↓
    console.log('布局视口的宽度,document.documentElement.clientWidth:', document.documentElement.clientWidth); // 移动端下一般为980
    // 浏览器视口的高度(不包括滚动条的轨道宽(但手机端是包括的,因为手机端的滚动条是悬浮在上面的,不单独占位)、DevTool面板) ↓
    console.log('布局视口的高度,document.documentElement.clientHeight:', document.documentElement.clientHeight);


    //=== === === === === === === === === === === === === === === === === === === === ===
    console.log('document.documentElement:',document.documentElement);
    const htmlEle = document.querySelector('html');
    console.log('document.querySelector(\'html\') === document.documentElement:',htmlEle === document.documentElement); // true
    //虽然我们上面打印为true,即document.documentElement在js里等于html标签元素
    //但它的clientWidth、clientHeight 并不等于我们css里设置的那么多(可以通过下面的打印看出),而是等于浏览器视口的大小
    /*
      client系列主要是用来获取一个元素的可见大小的，什么是可见的呢？
      能够着色的border、padding、width/height 即是可见的。
      但clientWidth/Height是不包括border的,但它的clientLeft/Top可以用来获取对应的左边框和上边框
    */
    //那么,这到底是因为document.documentElement不是html标签呢？ 还是因为html标签的client系列比较特殊呢?
    //↓
    console.log('htmlEle.clientWidth:',htmlEle.clientWidth); // 和document.documentElement的带的结果的一致
    console.log('document.documentElement.clientLeft:', document.documentElement.clientLeft); // 10 和其它标签元素的offset系列值表现一致
    console.log('document.documentElement.offsetWidth:', document.documentElement.offsetWidth); //540 和其它标签元素的offset系列值表现一致
    //↑ 说明是html标签,是它client系列比较特殊,它获取到的数值是html包含块的数值 即浏览器视口(不含滚轴轨道宽度)
</script>
</body>
</html>
